
import React, { Component } from 'react';
import { Table, Pagination, Tooltip, } from 'antd';
import './style.less';
import { toThousandSeparator } from '../../../common/formatters';

export default class GovTable extends Component {


	state = {
		sortedInfo: {
			"order": "descend",
			"field": this.props.config.sortItem || '',
			"columnKey": this.props.config.sortItem || ''
		}
	};

	onPageChange = (page, pageSize) => {

		this.props.setPage({ pageNo: page.toString() })
	}

	handleChange = (pagination, filters, sorter) => {

		this.setState({
			filteredInfo: filters,
			sortedInfo: sorter,
		});
	}

	render() {

		let { sortedInfo,
			// filteredInfo 
		} = this.state;
		sortedInfo = sortedInfo || {};
		// filteredInfo = filteredInfo || {};

		var showColumns
		var dataSource
		var page
		var showHeader
		try {
			showColumns = this.props.config.showColumns
			dataSource = this.props.config.data
			page = this.props.config.page || {
				pageSize: 0,
				totalNum: 0,
				pageNo: 0,
			}
			showHeader = this.props.config.showTHeader
		} catch (error) {
			showColumns = []
			dataSource = []
			page = {
				pageSize: 0,
				totalNum: 0,
				pageNo: 0,
			}
			showHeader = true
		}

		showColumns && showColumns.map(i => {
			i.key = i.dataIndex;
			if (!this.props.config.disableSort) {
				i.sorter = (a, b) => {
					return a[sortedInfo.columnKey] > b[sortedInfo.columnKey] ? 1 : -1;
				}
				i.sortOrder = sortedInfo.columnKey === i.dataIndex && sortedInfo.order;
			}
			i.render = (value, row) => {
				let text = value
				if (text !== null || text !== undefined) {

					if (typeof (text) === "string") {
						if (i.hasOwnProperty('hint')) {
							text = <Tooltip placement={i.hint} title={text}>
								{text}
							</Tooltip>
						}
					} else if (typeof (text) === "number") {
						if (i.rule !== undefined) {
							if (i.rule.hasOwnProperty('divide')) {
								text = (text / i.rule.divide)
							}
							if (i.rule.hasOwnProperty('toFixed')) {
								text = text.toFixed(i.rule.toFixed)
							}

						}
						if (!isNaN(text)) {
							text = toThousandSeparator(text);
						}
					}

				}
				if (i.hasOwnProperty('link')) {
					let linkObj = i.link
					let paramKeys = linkObj.paramKeys.map(key => row[key])
					let url = linkObj.url.format(...paramKeys)
					text = <a href={url} target={linkObj.target} ><Tooltip placement="bottomLeft" title={text}> {text} </Tooltip></a>
				}
				return text
			}
			return i;
		})


		return (
			<div>
				<div className='govTable'>
					<Table
						onChange={this.handleChange}
						columns={showColumns}
						dataSource={dataSource}
						showHeader={showHeader}
						bordered="solid"
						// size='middle'
						pagination={this.props.pagination || false}
						{...this.props.config.API}
					/>
				</div>
				{
					page.totalNum > page.pageSize &&
					<div className='table-page table-page-margin'>
						<Pagination
							pageSize={page.pageSize || 0}
							total={page.totalNum || 0}
							current={page.pageNo || 0}
							onChange={this.onPageChange}
						/>
						<span className="showAll w-pagination-item w-pagination-item-2 " onClick={() => {
							this.props.showAll()
						}} >全部</span>
					</div>
				}
			</div>
		);
	}
}
